<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪随机背景</title>
    <link rel="stylesheet" href="../public.css">
    <style>
        .box {
            width: 600px;
            height: 100px;
            margin: 20px auto;
        }

        .random {
            background: hsl(20, 40%, 90%);
            background-image: linear-gradient(90deg, #fb3 10px, transparent 0),
                linear-gradient(90deg, #ab4 20px, transparent 0),
                linear-gradient(90deg, #655 20px, transparent 0);
            background-size: 80px 100%, 60px 100%, 40px 100%;
        }

        .random1 {
            background: hsl(20, 40%, 90%);
            background-image:
                linear-gradient(90deg, #fb3 11px, transparent 0),
                linear-gradient(90deg, #ab4 23px, transparent 0),
                linear-gradient(90deg, #655 41px, transparent 0);
            background-size: 41px 100%, 61px 100%, 83px 100%;
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>伪随机背景</h1>
        <ul>
            <li>实自然界中的事物都不是以无限平铺的方式存在的。即使重复，也往往伴随着多样性和随机性。蝉原则</li>
            <li>可以看出图案每隔 240px 就会重复一次；这里贴片的尺寸实际上就是所有 background-size 的最小公倍数，而 40、60 和 80的最小公倍数正是 240。</li>
            <li>要让这种随机性更加真实，我们得把贴片的尺寸最大化。</li>
        </ul>
        <div class="box random ">
        </div>
        <ul>
            <li>要让这种随机性更加真实，我们得把贴片的尺寸最大化。</li>
            <li>为了让最小公倍数最大化，这些数字最好是“相对质数”</li>
            <li>最简单的办法就是尽量选择质数，因为质数跟其他任意数字都是相对质数。</li>
        </ul>
        <div class="box random1 ">
        </div>
    </div>
</body>

</html>